<template>
    <div class="login-container">
        <a-layout>
            <a-layout-header>
                <my-header></my-header>
            </a-layout-header>
            <a-layout-content>
                <div class="content">
                    <div class="register-form">
                        <a-card style="width: 600px; opacity: 0.9;">
                            <p>注册</p>
                            <a-form :form="form" @submit="handleSubmit">
                                <a-form-item v-bind="formItemLayout" label="username">
                                    <a-input
                                            v-decorator="[
                                                  'username',
                                                  {
                                                    rules: [
                                                      {
                                                        required: true,
                                                        message: 'Please input your username',
                                                      },
                                                    ],
          },
        ]"
                                    />
                                </a-form-item>
                                <a-form-item v-bind="formItemLayout" label="Password" has-feedback>
                                    <a-input
                                            v-decorator="[
          'password',
          {
            rules: [
              {
                required: true,
                message: 'Please input your password!',
              },
              {
                validator: validateToNextPassword,
              },
            ],
          },
        ]"
                                            type="password"
                                    />
                                </a-form-item>
                                <a-form-item v-bind="formItemLayout" label="Confirm Password" has-feedback>
                                    <a-input v-decorator="[
                                          'confirm',
                                          {
                                            rules: [
                                              {
                                                required: true,
                                                message: 'Please confirm your password!',
                                              },
                                              {
                                                validator: compareToFirstPassword,
                                              },
                                            ],
                                          },
                                        ]"
                                             type="password"
                                             @blur="handleConfirmBlur"
                                    />
                                </a-form-item>
                                <a-form-item v-bind="formItemLayout">
                                      <span slot="label">
                                        Nickname&nbsp;
                                        <a-tooltip title="What do you want others to call you?">
                                          <a-icon type="question-circle-o"/>
                                        </a-tooltip>
                                      </span>
                                    <a-input
                                            v-decorator="[
                                          'nickname',
                                          {
                                            rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
                                          },
                                        ]"
                                    />
                                </a-form-item>

                                <a-form-item v-bind="formItemLayout" label="Phone Number">
                                    <a-input
                                            v-decorator="[
                              'phone',
                              {
                                rules: [{ required: true, message: 'Please input your phone number!' }],
                              },
                            ]"
                                            style="width: 100%"
                                    >
                                        <a-select
                                                slot="addonBefore"
                                                v-decorator="['prefix', { initialValue: '86' }]"
                                                style="width: 70px"
                                        >
                                            <a-select-option value="86">
                                                +86
                                            </a-select-option>
                                            <a-select-option value="87">
                                                +87
                                            </a-select-option>
                                        </a-select>
                                    </a-input>
                                </a-form-item>
                                <a-form-item v-bind="formItemLayout" label="验证码：">
                                    <div class="captcha">
                                        <a-input style="float: left; width: 200px" ref="userNameInput"
                                                 v-model="inputCode"
                                                 placeholder="请输入验证码">
                                            <a-icon slot="prefix" type="user"/>
                                        </a-input>
                                        <a-button @click="getCaptcha" style="float: right; margin-left: 15px;"
                                                  type="primary" ghost>{{ createCode }}
                                        </a-button>
                                    </div>
                                </a-form-item>
                                <a-form-item v-bind="tailFormItemLayout">
                                    <a-button type="primary" html-type="submit">
                                        Register
                                    </a-button>
                                </a-form-item>
                            </a-form>
                        </a-card>
                    </div>
                </div>
            </a-layout-content>

            <a-layout-footer>
                <my-footer></my-footer>
            </a-layout-footer>
        </a-layout>
    </div>
</template>

<script>
    import MyHeader from "@/views/home/components/header/index";
    import MyFooter from "@/views/home/components/footer/index";
    import {getRandomSixNumber, register} from "@/api/user/user";

    export default {
        name: "register",
        components: {MyFooter, MyHeader},

        data() {
            return {
                inputCode: '',
                createCode: '',
                confirmDirty: false,
                autoCompleteResult: [],
                formItemLayout: {
                    labelCol: {
                        xs: {span: 24},
                        sm: {span: 8},
                    },
                    wrapperCol: {
                        xs: {span: 24},
                        sm: {span: 16},
                    },
                },
                tailFormItemLayout: {
                    wrapperCol: {
                        xs: {
                            span: 24,
                            offset: 0,
                        },
                        sm: {
                            span: 16,
                            offset: 8,
                        },
                    },
                },
            };
        },
        beforeCreate() {
            this.form = this.$form.createForm(this, {name: 'register'});
        },
        methods: {
            async init() {
                const data = await getRandomSixNumber()
                this.createCode = data
            },
            /* 重新生成验证码 */
            getCaptcha() {
                this.init()
            },
            /* 注册逻辑 */
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFieldsAndScroll(async (err, values) => {
                    if (!err) {
                        if (this.createCode === this.inputCode) {
                            let userForm = {
                                user: {
                                    username: values.username,
                                    password: values.password
                                },
                                userInfo: {
                                    nickname: values.nickname,
                                    phoneNumber: values.phone
                                }
                            };
                            const data = await register(userForm);
                            this.$message.loading({ content: '注册成功，正在跳转登录界面，请等待...', duration: 3 });
                            setTimeout(() => {
                                this.$router.push({
                                    name: 'login'
                                })
                                this.$message.success({content: '跳转成功，请登录', duration: 2})
                            }, 3000);

                        }else {
                            this.$message.error({
                                content: "验证码不正确",
                                duration: 2
                            })
                        }
                    }
                });
            },
            handleConfirmBlur(e) {
                const value = e.target.value;
                this.confirmDirty = this.confirmDirty || !!value;
            },
            compareToFirstPassword(rule, value, callback) {
                const form = this.form;
                if (value && value !== form.getFieldValue('password')) {
                    callback('Two passwords that you enter is inconsistent!');
                } else {
                    callback();
                }
            },
            validateToNextPassword(rule, value, callback) {
                const form = this.form;
                if (value && this.confirmDirty) {
                    form.validateFields(['confirm'], {force: true});
                }
                callback();
            },
        },
        created() {
            this.init()
        },

    }
</script>

<style scoped>
    .register-container {

    }

    .content {
        padding-top: 200px;
        min-height: 900px;
        background: url("../assets/login-bg2.jpg") no-repeat 100%;
        opacity: 0.5;
    }

    .register-form {
        float: right;
        margin-right: 100px;
    }

</style>